<!-- 供应商---sku销量统计页面 -->
<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" inline>
          <el-row>
            <!-- 时间选择 -->
            <el-form-item :label="$t('时间选择')">
              <el-date-picker
                @change="getList"
                :clearable="false"
                v-model="queryParams.time"
                type="daterange"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>

            <!-- 库位号 -->
            <el-form-item :label="$t('库位号')" prop="spNo">
              <el-input @keyup.enter.native="handleQuery" clearable v-model="queryParams.spNo" />
            </el-form-item>
            <!-- sku -->
            <el-form-item :label="$t('sku编号')" prop="skuNo">
              <el-input @keyup.enter.native="handleQuery" clearable v-model="queryParams.skuNo" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </PageSearch>

    <el-table
      :height="showSearch ? calTableHeight() - 50 : calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId"
    >
      <!-- sku编号 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="skuNo"
        :label="$t('sku编号')"
        :show-overflow-tooltip="true"
        width="106"
        fixed="left"
      >
        <template slot-scope="scope">
          <div @click="handleEdits(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>
      <!-- 库位号 -->
      <el-table-column align="center" auto-fit prop="spNo" :label="$t('库位号')" fixed="left" width="120" />

      <!-- 图片 -->
      <el-table-column align="center" prop="imgUrl" :label="$t('图片')">
        <template slot-scope="{ row }">
          <el-image
            fit="contain"
            :key="Math.random()"
            v-hover="row.imgUrl"
            style="width: 50px; height: 50px"
            :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" :label="$t('品名')" />
      <el-table-column align="center" show-overflow-tooltip prop="sellerNum" :label="$t('卖家数量')">
        <template #default="{ row }">
          <el-button
            type="text"
            :disabled="!hasPermission('distribution:skuDistributor:setRule')"
            @click="handleSellerNum(row)"
          >
            {{ row.sellerNum }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="salesVolume" label="卖家销量">
        <template slot-scope="{ row }">
          <span style="cursor: pointer; color: #1890ff" @click="showSales(row)">{{ row.salesVolume }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="reissueNum" :label="$t('补发数量')" width="90">
        <template slot-scope="{ row }">
          <span
            style="cursor: pointer; color: #1890ff"
            v-show="hasPermission('distribution:distributor:getReissueList')"
            @click="handleReissue(row)"
          >
            {{ row.reissueNum }}
          </span>
          <span v-show="!hasPermission('distribution:distributor:getReissueList')">
            {{ row.reissueNum }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="destroyNum" :label="$t('销毁数量')" width="90">
        <template slot-scope="{ row }">
          <span
            style="cursor: pointer; color: #1890ff"
            v-show="hasPermission('distribution:distributor:getDestroyList')"
            @click="handleDestroy(row)"
          >
            {{ row.destroyNum }}
          </span>
          <span v-show="!hasPermission('distribution:distributor:getDestroyList')">
            {{ row.destroyNum }}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="stock" label="总库存">
        <template slot-scope="{ row }">
          <span
            style="cursor: pointer; color: #1890ff"
            v-show="hasPermission('distribution:skuDistributor:setRule')"
            @click="handleStock(row)"
          >
            {{ row.stock }}
          </span>
          <span v-show="!hasPermission('distribution:skuDistributor:setRule')">
            {{ row.stock }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="cloudStock" label="云库存" />
      <el-table-column align="center" show-overflow-tooltip prop="purchaseNum" label="采购中数量" />
      <el-table-column align="center" show-overflow-tooltip prop="reserveStock" label="保留库存">
        <template slot-scope="{ row }">
          <div
            v-show="hasPermission('distribution:skuDistributor:setRule')"
            class="table-item"
            @click="handleSetRules(row)"
          >
            {{ row.reserveStock }}
          </div>
          <div v-show="!hasPermission('distribution:skuDistributor:setRule')" class="table-item">
            {{ row.reserveStock }}
          </div>
          <!--  stockMode 预留模式 1-固定 2-百分比-->
          <div v-if="row.stockMode == 1">固定:{{ row.fixedNum }}</div>
          <div v-if="row.stockMode == 2">百分比:{{ row.percent }}%</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="销量趋势（销量）" width="250">
        <template slot-scope="{ row }">
          <div :id="'main' + row.skuId" style="width: 250px; height: 70px"></div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="getList" ref="Skucontmoduler"></Skucontmoduler>
    <SkuSaleChart :show.sync="skuSaleChart.show" :formData="skuSaleChart.formData" />
    <Stock :show.sync="stock.show" :formData="stock.formData" />
    <SellerNum :show.sync="sellerNum.show" :formData="sellerNum.formData" />
    <Destroy :show.sync="destroy.show" :formData="destroy.formData" />
    <Reissue :show.sync="reissue.show" :formData="reissue.formData" />
    <SetRules
      :show.sync="setRules.show"
      @getList="getList"
      :skuDistributorId="setRules.formData.skuDistributorId"
      :formData="setRules.formData"
    />
  </div>
</template>

<script>
import { getSkuSaleListByPlatform } from '@/api/statistics/skuSaleSupplier'
import Skucontmoduler from '@/components/Skucontmoduler'
import SkuSaleChart from '@/components/skuSaleChart/index.vue'
import Stock from './component/stock.vue'
import SellerNum from './component/sellerNum.vue'
import Destroy from './component/destroy.vue'
import Reissue from './component/reissue.vue'
import SetRules from '@/views/distribution/sku/skuList/component/setRules.vue'

import * as echarts from 'echarts'
import useStaticsConfig from '@/utils/useStaticsConfig'
import { checkPermi } from '@/utils/permission'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SkuSalePlatform',
  components: {
    Skucontmoduler,
    SkuSaleChart,
    Stock,
    SellerNum,
    SetRules,
    Destroy,
    Reissue,
  },
  data() {
    return {
      setRules: {
        show: false,
        formData: {},
      },
      destroy: {
        show: false,
        formData: {},
      },
      reissue: {
        show: false,
        formData: {},
      },
      sellerNum: {
        show: false,
        formData: {},
      },
      stock: {
        show: false,
        formData: {},
      },
      skuSaleChart: {
        show: false,
        formData: {},
      },
      formData: {
        isShow: false,
        data: {},
      },
      showSearch: true,
      form: {},
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        spNo: '',
        skuNo: '',
        time: [],
      },
    }
  },
  async created() {
    this.queryParams.time = this.setStatisticsDefautTime('day')
    this.getList()
  },

  methods: {
    handleSetRules(row) {
      this.setRules.formData = row
      this.setRules.show = true
    },
    handleReissue(row) {
      this.reissue.formData = { ...row, time: this.queryParams.time }
      this.reissue.show = true
    },
    handleDestroy(row) {
      this.destroy.formData = { ...row, time: this.queryParams.time }
      this.destroy.show = true
    },
    handleSellerNum(row) {
      this.sellerNum.formData = row
      this.sellerNum.show = true
    },
    handleStock(row) {
      this.stock.formData = row
      this.stock.show = true
    },
    hasPermission(str) {
      return checkPermi([str])
    },
    /**展示饼状图 */
    showSales(row) {
      this.skuSaleChart.formData = {
        ...row,
        time: this.queryParams.time,
      }
      this.skuSaleChart.show = true
    },
    drawCharts() {
      function draw(id, item) {
        const xData = item?.salesVolumeList.map((i) => i.createTime?.split(' ')[0])
        const yData = item?.salesVolumeList.map((item) => item.saleNum)
        const { tooltip, xAxis, yAxis, grid, series } = useStaticsConfig(xData, yData)
        const option = { tooltip, xAxis, yAxis, grid, series }
        const chartDom = document.getElementById('main' + id)

        let myChart = echarts.getInstanceByDom(chartDom)

        if (myChart == null) {
          myChart = echarts.init(chartDom)
        }
        myChart.setOption(option)
      }

      for (const item of this.tableData) {
        draw(item.skuId, item)
      }
    },
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformation')
    },
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getSkuSaleListByPlatform(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
        this.$nextTick(() => {
          this.drawCharts()
        })
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.spNo = ''
      this.queryParams.skuNo = ''
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.queryParams.time = this.setStatisticsDefautTime('day')

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.table-item {
  color: #1890ff;
  cursor: pointer;
}
</style>
